*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  /* height: 100vh; */
  font-size: 16px;
  position: relative;
}

.loading, .cause, .main, .lottery, .wish, .regulation, .Notice {
  background: url(../image/空背景.png) no-repeat center;
  background-size: 100% 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: none;
}
.loading{
  display: block;
}

.music img{
  position: absolute;
  width: 0.6rem;
  right: 3%;
  top: 1%;
  z-index: 10000;
}
.press_img img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  opacity: 0;
}
.rotateMusic{
  animation: 5s rotate_music infinite linear;
}
@keyframes rotate_music {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
.cloud .cloud_left img {
  width: 4rem;
  position: absolute;
  left: 0%;
  top: 6%;
  animation: move1 15s infinite ease-in-out;
}

@keyframes move1 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-0.2rem, -0.5rem);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(-0.2rem, 0.2rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.cloud .cloud_right img {
  width: 4rem;
  position: absolute;
  top: 0%;
  right: 0%;
  animation: move2 15s infinite linear;
}

@keyframes move2 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0.2rem, -0.2rem);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(0.2rem, -0.5rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.cloud .cloud_bottom img {
  width: 5rem;
  position: absolute;
  right: 0%;
  bottom: 0%;
  animation: move3 15s infinite linear;
  z-index: 60;
}

@keyframes move3 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0.5rem, 0.5rem);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(0.5rem, 0.5rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.cloud .cloud_bottom_left img {
  width: 3rem;
  position: absolute;
  left: 0%;
  bottom: 0%;
  animation: move1 15s infinite linear;
  z-index: 60;
}

.main .cloud .cloud_bottom img, .main .lottery .cloud_bottom img {
  width: 4.5rem;
  z-index: 60;
}

.main .cloud .cloud_left img, .lottery .cloud .cloud_left img {
  width: 5rem;
  top: -1%;
  z-index: 60;
}

.main .cloud .cloud_right img, .lottery .cloud .cloud_right img {
  width: 2rem;
  top: 0%;
  z-index: 60;
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.75);
  /* animation: 1s Shake cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

.logo img {
  width: 4rem;
}

@keyframes slide-bottom {
  0% {
    transform: translate(-50%, -130%) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.75);
  }
}

/* @keyframes Shake {
  10% {
    transform: rotate(-15deg) translate(-50%, -50%)  scale(1.75);
  }
  20% {
    transform: rotate(20deg) translate(-50%, -50%)  scale(1.75) ;
  }

  30% {
    transform: rotate(-15deg) translate(-50%, -50%)  scale(1.75);
  }
  40% {
    transform: rotate(20deg) translate(-50%, -50%)  scale(1.75) ;
  }

  50% {
    transform: rotate(-15deg) translate(-50%, -50%)  scale(1.75);
  }

  60% {
    transform: rotate(10deg) translate(-50%, -50%)  scale(1.75);
  }

  70% {
    transform: rotate(-10deg) translate(-50%, -50%)  scale(1.75);
  }

  80%, 100% {
    transform: rotate(0deg) translate(-50%, -50%)  scale(1.75);
  }
} */
/* @keyframes Shake2 {
  10% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
  }

  20% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(20deg) scale(1.05);
  }

  30% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
  }

  40% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(20deg) scale(1.05);
  }

  50% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
  }

  60% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(10deg) scale(1.05);
  }

  70% {
    width: 3rem;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1.05);
  }

  80%, 100% {
    left: 50%;
    top: 65%;
    width: 3rem;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
} */

.progress {
  width: 4rem;
  border: 0.05rem solid #fecd7e;
  border-radius: 25px;
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
}

.myprogress {
  position: relative;
}

.myBar {
  width: 0%;
  height: .15rem;
  background-color: #fecd7e;
  border-radius: 25px;
}

.bar_number {
  position: absolute;
  right: -28%;
  top: 50%;
  transform: translateY(-50%);
}

.bar_number {
  color: #fecd7e;
}

.loadText {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6rem;
  height: .65rem;
  overflow: hidden;
  text-align: center;
}

.showText {
  position: relative;
  text-align: center;
}

.showText p {
  color: #fecd7e;
  font-size: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


@keyframes labelmove1 {
  0% {
    top: -3rem;
    opacity: 0;
  }

  80% {
    top: -3rem;
    opacity: 0;
  }

  100% {
    top: 1rem;
    opacity: 1;
  }
}

@keyframes labelmove2 {
  0% {
    top: -3rem;
    opacity: 0;
  }

  80% {
    top: -3rem;
    opacity: 0;
  }

  100% {
    top: 0.5rem;
    opacity: 1;
  }
}

.label_box img {
  width: 80%;
}

.label_box {
  width: 6rem;
  height: 2.5rem;
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translate(-50%, -5rem);
  z-index: 400;
  opacity: 0;
  /* animation: label_top 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes label_top {
  0%, 50% {
    width: 6rem;
    transform: translate(-50%, -5rem);
    opacity: 0;
  }

  100% {
    width: 6rem;
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.label_cont {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.label_cont .label {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sizeMaxmin {
  animation: 1s toMaxmin infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes toMaxmin {
  0% {
    width: 80%;
  }

  100% {
    width: 100%;
  }
}

.label_left_two, .label_right_one {
  align-self: flex-end;
}

.brand {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0);
  opacity: 0;
}

.brand_box {
  width: 6.7rem;
}

.band_logo {
  position: absolute;
  left: 50%;
  transform: translate(-47%, 0);
  width: 7.5rem;
  top: -0.7rem;
}

.brand_btn {
  width: 5.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 11rem;
  left: 50%;
  transform: translate(-50%, 3rem);
  z-index: 100;
  opacity: 0;
  /* animation: brandShow 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes brandShow {
  0%, 80% {
    width: 5.5rem;
    opacity: 0;
    transform: translate(-50%, 3rem);
  }

  100% {
    width: 5.5rem;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.brand_btn img {
  width: 2.4rem;
  height: 0.8rem;
  cursor: pointer;
}

.brand_cont {
  position: relative;
}

.text_left, .text_center, .text_title_right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.band_text {
  position: absolute;
  top: 83.5%;
  width: 4rem;
  height: 2.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Family .band_text, .healthy .band_text {
  top: 80.5%;
}

.text_left {
  width: 1.2rem;
  height: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* height: 94%; */
}

.text_center {
  width: 2.2rem;
  height: 85%;
}

.text_center p, .text_left p {
  writing-mode: vertical-rl;
  color: #c46345;
}

.text_center p {
  font-size: 0.28rem;
  text-decoration: underline;
  line-height: 0.45rem;
  padding-top: 0.1rem;
}

.text_left p {
  font-size: 0.2rem;
  padding-top: 0.1rem;
}

.text_title_right {
  width: 1rem;
  height: 100%;
}

.text_right p {
  color: #fecd7e;
  font-size: 0.2rem;
  text-align: center;
  word-wrap: break-word;
}

.text_right_two, .text_right {
  width: 40%;
}

.text_right_two p {
  color: #fecd7e;
  font-size: 0.26rem;
  text-align: center;
  word-wrap: break-word;
}

.curtains_top img {
  width: 100%;
  height: 4.5rem;
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

.curtains_left img {
  position: absolute;
  left: 0;
  width: 2rem;
  top: 3.7rem;
  z-index: 25;
}
.lottery .curtains_left img,
.lottery .curtains_right img{
  top: 2.7rem;
}

.main .curtains_left img:last-child {
  width: 0.9rem;
  z-index: 71;
  top: 5.7rem;
  left: -0.1rem;
  opacity: 0;
  /* animation: 1.2s bandShow ease-in-out; */
}

.main .curtains_right img:last-child {
  width: 0.9rem;
  z-index: 71;
  top: 5.7rem;
  right: -0.1rem;
  opacity: 0;
  /* animation: 1.2s bandShow ease-in-out; */
}

@keyframes bandShow {
  0%, 80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.curtains_right img {
  position: absolute;
  right: 0;
  width: 2rem;
  top: 3.7rem;
  z-index: 25;
}

.main .curtains_left img {
  position: absolute;
  left: -2rem;
  width: 4rem;
  top: 3.7rem;
  z-index: 25;
  /* animation: 0.8s leftMove ease-in-out; */
}

.main .curtains_left .curtains_img_one, .main .curtains_right .curtains_img_one {
  top: 2rem;
  height: 9.5rem;
}

@keyframes leftMove {
  from {
    left: 0;
  }

  to {
    left: -2rem;
  }
}

.main .curtains_right img {
  position: absolute;
  right: -2rem;
  width: 4rem;
  top: 3.7rem;
  z-index: 25;
  /* animation: 0.8s rightMove ease-in-out; */
}

@keyframes rightMove {
  from {
    right: 0;
  }

  to {
    right: -2rem;
  }
}

.halo {
  opacity: 0;
  /* animation: 2.8s signShow ease-in-out; */
}

.halo img {
  width: 7rem;
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1.3);
  z-index: 10;
  /* animation: round 10s linear infinite; */
}

@keyframes round {
  from {
    width: 7rem;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.3);
  }

  to {
    width: 7rem;
    transform: translate(-50%, -50%) rotate(360deg) scale(1.3);
  }
}

.sign_center {
  opacity: 0;
  /* animation: 2.5s signShow2 ease-in-out; */
}

.sign_center img {
  width: 3rem;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  z-index: 20;
  visibility: visible;
  opacity: 1;
  /* animation: 2.5s signShow2 ease-in-out; */
}

@keyframes signShow {
  0%, 70% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes signShow2 {
  0%, 70% {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }

  100% {
    visibility: visible;
    opacity: 1;
    z-index: 20;
  }
}

.title img {
  width: 5rem;
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translate(-50%, -5rem) scale(1);
  top: 9%;
}

.main .title img {
  /* animation: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) slide-bottom2; */
}

@keyframes slide-bottom2 {
  0% {
    width: 5rem;
    transform: translate(-50%, -5rem) scale(1);
  }

  80% {
    width: 5rem;
    transform: translate(-50%, 0) scale(1.4) rotate(-5deg);
  }

  90% {
    width: 5rem;
    transform: translate(-50%, 0) scale(1.4) rotate(10deg);
  }

  100% {
    width: 5rem;
    transform: translate(-50%, 0) scale(1.4) rotate(-5deg);
  }
}

.title_text img {
  width: 5rem;
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 26%;
  transform: translate(-50%, 0);
  opacity: 0;
  /* animation: 2s titleShow cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes titleShow {
  0%, 50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* .woods_left img{
  width: 1.7rem;
  position: absolute;
  left: 0;
  z-index: 80;
  top: 73%;
  transform: translateY(-50%);
  animation: 1.6s woodsMove ease-in-out;
}
@keyframes woodsMove {
  0%,80%{
    left: -2rem;
  }
  100%{
    left: 0;
  }
}
.woods_right img{
  width: 1.7rem;
  position: absolute;
  right: 0;
  z-index: 80;
  top: 42%;
  transform: translateY(-50%);
  animation: 1.6s woodsMove2 ease-in-out;
}
@keyframes woodsMove2 {
  0%,80%{
    right: -2rem;
  }
  100%{
    right: 0;
  }
} */
.shelter {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 200;
  opacity: .8;
}

.halo_center img {
  width: 100%;
  z-index: 300;
  position: absolute;
  opacity: .5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: 3s halo_show linear;
}

@keyframes halo_show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.autograph img {
  position: absolute;
  z-index: 301;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
}

.autograph_logo_bot {
  /* animation: 1s toTop ease-in-out; */
  bottom: -100%;
}

.autograph .autograph_logo {
  bottom: 7.9rem;
  z-index: 502;
  width: 0.8rem;
  transform: translate(-50%, 0) scale(1.3);
  /* animation: 2s showLogo cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes showLogo {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.3);
  }
}

@keyframes toTop {
  from {
    bottom: -100%;
  }

  to {
    bottom: 0;
  }
}

.autograph p {
  position: absolute;
}

.auto_text p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3.2rem;
  height: 4.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 301;
  width: 0.5rem;
  text-align: center;
  font-size: 0.5rem;
  color: #d16243;
  opacity: 0;
  /* animation: 4s toTopText ease-in-out; */
}

@keyframes toTopText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.lottery_box img {
  width: 3.1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 300;
  transform: translate(4rem, 7rem);
}

.lottery_box img {
  /* animation: 3s erge2 cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes erge2 {
  0%, 50% {
    right: 0;
    bottom: 0;
    transform: translate(4rem, 7rem);
  }

  100% {
    right: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
}


.lottery_title {
  width: 46%;
}

.lottery_title h2 {
  color: #fecd7e;
  font-size: 0.3rem;
  font-weight: 300;
  opacity: 0;
}

.lottery_text_box {
  opacity: 0;
  /* animation: 3s lotBoxText cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes lotBoxText {
  0%, 90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.lottery_top {
  width: 5rem;
  height: 1.2rem;
  position: absolute;
  bottom: 8.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 400;
  border: 1px solid #ffe1a0;
  border-top: none;
}

.ball_cont {
  width: 100%;
  height: 100%;
  position: relative;
}

.ball {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  background-color: #ffe1a0;
  border-radius: 50%;
}

.ball_two_cont {
  width: 100%;
  height: 100%;
  position: relative;
}

.ball_Two {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid #ffe1a0;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: 1.5s ball cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate infinite;
}

.lottery_center {
  width: 3.5rem;
  height: 1.2rem;
  position: absolute;
  bottom: 7.37rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 400;
  border: 1px solid #ffe1a0;
  border-top: none;
  border-right: 0;
  border-bottom: 0;
}

.lottery_right {
  width: 1.5rem;
  height: 3rem;
  position: absolute;
  bottom: 4.5rem;
  right: 0%;
  transform: translate(-21%, 0);
  z-index: 400;
  border: 1px solid #ffe1a0;
  border-top: none;
  border-left: none;
  opacity: 0;
}

.lottery_text_right {
  opacity: 0;
}

@keyframes ball {
  0% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0;
  }

  100% {
    width: 0.3rem;
    height: 0.3rem;
    opacity: 1;
  }
}

@keyframes ball2 {
  0% {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 0;
  }

  100% {
    width: 0.2rem;
    height: 0.2rem;
    opacity: 1;
  }
}

.lottery_top .ball:nth-child(1) {
  left: -0.1rem;
}

.lottery_top .ball:nth-child(2) {
  right: -0.1rem;
}

.lottery_center .ball:nth-child(1) {
  width: 0.1rem;
  height: 0.1rem;
  left: -0.05rem;
}

.ball_min {
  width: 0.2rem;
  height: 0.2rem;
  animation: 1.5s ball2 cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate infinite;
}

.lottery_center .ball:nth-child(2) {
  left: -0.1rem;
  bottom: -0.1rem;
}

.lottery_right .ball {
  right: -0.1rem;
}

.lottery_text_img img:nth-child(1) {
  position: absolute;
  z-index: 500;
  bottom: 3.6rem;
  width: 0.26rem;
  left: 50%;
  transform: translate(-1.85rem, 0);
}

.lottery_text_img img:nth-child(2) {
  position: absolute;
  z-index: 500;
  width: 1rem;
  right: 0;
  transform: translate(-96%, 0);
  bottom: 6rem;
}

.wish_bg img {
  width: 7.5rem;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, 10rem);
  z-index: 100;
  opacity: 1;
}

.wish .wish_bg img {
  /* animation: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal both running slide-top2; */
}

@keyframes slide-top2 {
  0% {
    left: 50%;
    transform: translate(-50%, 10rem);
    opacity: 0;
  }

  100% {
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.wish_rule img {
  width: 0.8rem;
  position: absolute;
  left: 0;
  top: 25%;
  transform: translate(-1rem, -50%);
  z-index: 100;
  /* animation: 1.5s wishShow2 ease-in-out; */
}

@keyframes wishShow2 {
  0%, 50% {
    top: 25%;
    transform: translate(-1rem, -50%);
  }

  100% {
    top: 25%;
    transform: translate(0, -50%);
  }
}

.halo {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
}

.wish_success {
  opacity: 0;
}

.wish_success img:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 105%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: 2.5rem;
}

.wish_success img:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 115%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: 2.5rem;
}

@keyframes wishShow {
  0%, 50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.wish_text textarea {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -10rem);
  width: 3.2rem;
  height: 3rem;
  background: none;
  color: #b4523a;
  resize: none;
  font-size: 0.3rem;
  line-height: 0.75rem;
  letter-spacing: 0.05rem;
  border: none;
  padding-left: 4px;
  z-index: 200;
  /* animation: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal both running slide-top2; */
}

.tiger_left img, .tiger_left_wish img {
  width: 2.3rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  transform: translate(-3rem, 3rem);
}

.regulation .tiger_left img {
  transform: translate(0, 0);
}

.tiger_left img {
  /* animation: 2s erge cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes erge {
  0%, 50% {
    left: 0;
    bottom: 0;
    transform: translate(-3rem, 3rem);
  }

  100% {
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
}

.tiger_right img {
  width: 3rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.wish .cloud .cloud_left img {
  width: 6rem;
  left: 0%;
  top: 40%;
}

.wish .cloud .cloud_right img {
  animation: move4 20s infinite linear;
}

@keyframes move4 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0.5rem, -1rem);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(-0.2rem, -1rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.cloud_right_two img {
  position: absolute;
  width: 6rem;
  right: 0%;
  top: 30%;
  animation: move3 15s infinite ease-in-out;
}

.wish .cloud .cloud_bottom img {
  width: 6rem;
}

.prpup .prpup_box {
  width: 6.6rem;
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

.prpup_btn {
  width: 1rem;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  z-index: 200;
  cursor: pointer;
}

.Notice .cloud .cloud_bottom_left img {
  width: 5rem;
  animation: move5 15s infinite linear;
}

@keyframes move5 {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-0.2rem, 0.2rem);
  }

  50% {
    transform: translate(0, 0);
  }

  75% {
    transform: translate(-0.2rem, 0.5rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.Notice .cloud .cloud_bottom img {
  width: 3.2rem;
}

.notice_cont img {
  width: 7.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 10rem);
  z-index: 101;
  /* animation: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal both running slide-top2; */
}

.Notice_return img {
  width: 3rem;
  position: absolute;
  top: 1%;
  left: 0;
  transform: translate(-4rem, 0);
  cursor: pointer;
}

.food_top img, .food_bottom img {
  width: 2.5rem;
  position: absolute;
  right: 0;
  z-index: 80;
  top: 50%;
  transform: translateY(-50%);
}

.food_top img {
  top: 35%;
  right: -1.2rem;
  /* animation: 1s woodsMove3 cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

.food_bottom img {
  top: 80%;
  right: -3rem;
  /* animation: 1.5s woodsMove2 cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

@keyframes woodsMove2 {
  0%, 50% {
    right: -3rem;
  }

  100% {
    right: 0;
  }
}

@keyframes woodsMove3 {
  0%, 50% {
    right: -3rem;
  }

  100% {
    right: -1.2rem;
  }
}

.audio_cont, .page_audio {
  position: absolute;
  z-index: -1;
}

.brand {
  /* animation: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal both running slide-top; */
}

@keyframes slide-top {
  0% {
    left: 50%;
    transform: translate(-50%, -11rem);
    opacity: 0;
  }

  100% {
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.iosTips p {
  position: absolute;
  z-index: 500;
  font-size: 0.1rem;
  bottom: 0.5rem;
  right: 0.1rem;
  font-weight: bold;
}

.shareImg {
  position: absolute;
  top: 0;
  left: 0;
  /* opacity: 0; */
}

.brand_return {
  opacity: 0;
}

.brand_return img {
  width: 1rem;
  position: absolute;
  left: 3%;
  top: 2%;
  cursor: pointer;
  z-index: 600;
}

.brand_return h2 {
  position: absolute;
  left: 3%;
  transform: translateX(-0.15rem);
  top: 11%;
  z-index: 600;
  color: #ffc90b;
  font-size: 0.4rem;
}